<script setup>
import {ref, reactive} from 'vue'
import {uploadUrl} from "@/api";
import { addDrill, modifyDrill, getDrillDetail } from "@/api/drill";
import Uploader from "@/components/uploader.vue";
import {host} from "@/utils/config";
import {onLoad} from "@dcloudio/uni-app";
import SelectDate from "@/components/selectDate.vue";

const userInfo = uni.getStorageSync('userInfo')
const dict = reactive({})
const formData = ref(null)
const pageData = reactive({
  formData: {
    train: [],
    photo: [],
    assess: [],
    summary: [],
    improve: []
  },
})
const formRule = {
  drillThemes: [
    {
      required: true,
      message: '请填写演练主题'
    }
  ]
}

const loadingBtn = ref(false)
const submit = () => {
  console.log('pageData.formData', pageData.formData)
  formData.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('pagedata', pageData.formData)
      pageData.formData.fileList = []
      pageData.formData.fileList = [
        ...pageData.formData.train || [],
        ...pageData.formData.photo || [],
        ...pageData.formData.assess || [],
        ...pageData.formData.summary || [],
        ...pageData.formData.improve || [],
      ]
      console.log('pagedata', pageData.formData)
      loadingBtn.value = true
      let api
      let msg = ''
      if (pageData.formData.id) {
        api = modifyDrill
        msg = '更新成功！'
      } else {
        api = addDrill
        msg = '新增成功！'
      }
      api(pageData.formData).then(res => {
        console.log('create', res)
        uni.showToast({
          title: msg
        })
        uni.navigateBack()
      }).catch(err => {
        loadingBtn.value = false
      })
    }
    else {
      console.log('error submit!!', errors)
      uni.showToast({
        title: errors[0].message,
        icon: 'error'
      })
    }
  })
}

const detailId = ref('')
const loading = ref(false)
onLoad((options) => {
  if(options.id) {
    detailId.value = options.id
    getDetail(detailId.value)
    return
  }
})

const getDetail = async(id) => {
  loading.value = true
  await getDrillDetail(id).then(res => {
    pageData.formData = res.data
    pageData.formData.train = []
    pageData.formData.photo = []
    pageData.formData.assess = []
    pageData.formData.summary = []
    pageData.formData.improve = []
    console.log('res.data', res.data)
    console.log('formData', pageData.formData)
    for(let i = 0; i < pageData.formData.fileList.length; i++) {
      const fileItem = pageData.formData.fileList[i]
      if (!fileItem.fileUrl) continue
      const tmpArr = fileItem.fileUrl.split('/')
      fileItem.name = tmpArr[tmpArr.length - 1]
      const tmpArr1 = fileItem.name.split('.')
      fileItem.extname = tmpArr1[tmpArr1.length - 1]
      fileItem.url = host + fileItem.fileUrl
      if (pageData.formData.fileList[i].fileType === 4) {
        pageData.formData.train = [
            ...pageData.formData.train,
            ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 5) {
        pageData.formData.photo = [
          ...pageData.formData.photo,
          ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 6) {
        pageData.formData.assess = [
          ...pageData.formData.assess,
          ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 7) {
        pageData.formData.summary = [
          ...pageData.formData.summary,
          ...[fileItem]
        ]
      }
      if (pageData.formData.fileList[i].fileType === 8) {
        pageData.formData.improve = [
          ...pageData.formData.improve,
          ...[fileItem]
        ]
      }
    }
    loading.value = false
    console.log('formData1', pageData.formData)
  })
}

</script>

<template>
  <nut-loading-page :loading="loading" />
  <div class="form">
    <nut-form :model-value="pageData.formData" ref="formData" class="form" :rules="formRule">
      <nut-form-item label="演练主题" prop="drillThemes" label-width="70">
        <nut-input v-model="pageData.formData.drillThemes" />
      </nut-form-item>
      <nut-form-item label="演练地点" prop="address" label-width="70">
        <nut-input v-model="pageData.formData.address" />
      </nut-form-item>
      <nut-form-item label="演练时间" prop="drillTime" label-width="70">
        <select-date v-model="pageData.formData.drillTime"></select-date>
      </nut-form-item>
      <nut-form-item label="演练方案" prop="drillProject" label-width="70">
        <nut-input v-model="pageData.formData.drillProject" />
      </nut-form-item>
      <nut-form-item label="演练培训" prop="train" label-width="70">
        <uploader v-model="pageData.formData.train" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="4" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="演练照片" prop="photo" label-width="70">
        <uploader v-model="pageData.formData.photo" :url="uploadUrl" url-field="fileUrl" type-field="fileType" type="5" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="演练评估" prop="assess" label-width="70">
        <uploader v-model="pageData.formData.assess" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="6" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="演练总结" prop="summary" label-width="70">
        <uploader v-model="pageData.formData.summary" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="7" :limit="3"></uploader>
      </nut-form-item>
      <nut-form-item label="持续改进" prop="improve" label-width="70">
        <uploader v-model="pageData.formData.improve" :url="uploadUrl" url-field="fileUrl" type-field="fileType" file-mediatype="all" type="8" :limit="3"></uploader>
      </nut-form-item>
    </nut-form>
  </div>
  <nut-cell>
    <nut-button :loading="loadingBtn" type="primary" block @click="submit">提交</nut-button>
  </nut-cell>
  <nut-safe-area position="bottom" />
</template>

<style scoped lang="scss">
.form{padding: 0 10px;}
</style>
